import { View, Text } from '@tarojs/components'
import SimpleImage from '../common/SimpleImage'
import PriceDisplay from '../common/PriceDisplay'

const ProductCard = ({ product, onClick }) => {
  const handleImageLoad = () => {
    if (process.env.NODE_ENV === 'development') {
      console.log('商品图片加载成功:', product.image)
    }
  }

  const handleImageError = () => {
    if (process.env.NODE_ENV === 'development') {
      console.log('商品图片加载失败:', product.image)
    }
  }

  // 调试信息
  if (process.env.NODE_ENV === 'development') {
    console.log('ProductCard渲染:', {
      title: product.title,
      image: product.image,
      price: product.price
    })
  }

  return (
    <View className='product-card' onClick={() => onClick(product)}>
      {/* 商品图片 */}
      <View className='product-image-container'>
        <SimpleImage
          src={product.image}
          className='product-image'
          onLoad={handleImageLoad}
          onError={handleImageError}
          showLoadingSpinner={true}
        />
      </View>
      
      {/* 商品信息 */}
      <View className='product-info'>
        <Text className='product-title'>{product.title}</Text>
        <PriceDisplay 
          price={product.price}
          originalPrice={product.originalPrice}
          saved={product.saved}
        />
        
        {/* 商品标签 - 放在价格和星级之间 */}
        {product.tags && product.tags.length > 0 && (
          <View className='product-tags'>
            {product.tags.map((tag, index) => (
              <View key={index} className='product-tag'>
                <Text>{tag}</Text>
              </View>
            ))}
          </View>
        )}
        
        <View className='product-footer'>
          <Text className='hospital-name'>{product.hospital}</Text>
          {product.doctor && (
            <Text className='doctor-name'>👨‍⚕️ {product.doctor}</Text>
          )}
          <Text className='rating'>⭐ {product.rating ? product.rating.toFixed(1) : '0.0'}</Text>
        </View>
      </View>
    </View>
  )
}

export default ProductCard
